	$(".product>p>span").click(function () {
		$(this).addClass("ho").siblings().removeClass("ho");
		$(".pro_nr").eq($(this).index()).show().siblings().hide();
	})
	$("#sgin").click(function () {
		location.href = "../sign_in.html";
	})
	
	
	
	
	
	
	/**
	 * options   一个对象
	 * 		currentPage		当前页数
	 * 		allPage			全部页数
	 * 		warp			要添加的父元素
	 * 		changePage		渲染数据的回调函数
	*/
	function Trunpage(options) {
		this.currentPage = options.currentPage || 1;
		this.allPage = options.allPage || 1;
		this.warp = options.warp || document.body;
		this.changePage = options.changePage || function () {};
		this.initial();
	}
	
	Trunpage.prototype.initial = function () {
		this.addNode();
		this.bindEvent();
	}
	
	Trunpage.prototype.addNode = function () {
		this.warp.html("");
		/* 添加向前翻页 */
		if (this.currentPage > 1) {
			var addUp = '<div class="backon_left on"> \
							<i></i>\
						</div>';
			this.warp.append(addUp);
		}
		
		var addUl = $("<ul></ul>");
		
		/* 第一页 */
		var firstLi = $("<li class='on'>1</li>");
		if (this.currentPage == 1) {
			firstLi.addClass("clk");
		}
		addUl.append(firstLi);
		
		/* 省略号 */
		if (this.currentPage - 1 > 1) {
			var firstSpan = $("<li><span>...</span></li>")
			addUl.append(firstSpan);
		}
		
		/* 中间五页 */
		for (var i = this.currentPage - 1 ; i <= this.currentPage + 1 ; i++) {
			if (i > 1 && i < this.allPage) {
				var centLi = $("<li class='on'>"+i+"</li>");
				if (this.currentPage == i) {
					centLi.addClass("clk");
				}
				addUl.append(centLi);
			}
		}
		
		
		/* 省略号 */
		if (this.currentPage + 1 < this.allPage - 1) {
			var lastSpan = $("<li><span>...</span></li>")
			addUl.append(lastSpan);
		}
		
		/* 最后一页 */
		if (this.allPage != 1) {
			var lastLi = $("<li class='on'>"+this.allPage+"</li>");
			if (this.currentPage == this.allPage) {
				lastLi.addClass("clk");
			}
			addUl.append(lastLi);
		}
		
		/* 把ul插进元素里 */
		this.warp.append(addUl);
		
		/* 向后翻页 */
		if (this.currentPage < this.allPage) {
			var addNext = '<div class="on backon_right"> \
								<i></i> \
							</div>';
			this.warp.append(addNext);
		}
		
	}
	Trunpage.prototype.bindEvent = function () {
		/* 绑定事件 */
		/* 获取构造函数的this */
		var currentThis = this;
		/* 给向左的翻页绑定事件 */
		this.warp.find(".backon_left").click(function () {
			/* 让当前页码 -1 */
			currentThis.currentPage--;
			initPage();
		})
		/* 给向左的翻页绑定事件 */
		this.warp.find(".backon_right").click(function () {
			/* 让当前页码 +1 */
			currentThis.currentPage++;
			initPage();
		})
		this.warp.find("li.on").click(function () {
			/* 获取当前点击的页数 */
			var page = parseInt($(this).html());
			currentThis.currentPage = page;
			initPage();
		})
		function initPage() {
			/* 初始化翻页 */
			currentThis.initial();
			/* 把当前页用传进来的函数暴露出去 */
			currentThis.changePage(currentThis.currentPage);
		}
	}	
	
	/* 创建一个数组 */
	var arr = [];
	/* 来模拟渲染的数据 */
	for (var i = 0 ; i < 80 ; i++) {
		arr.push({
			name: "用户"+(i+1)
		});
	}
	/* 每页渲染的数据 */
	var pageSize = 5;
	/* 动态获取的页数 */
	var allPageInt = arr.length / pageSize;
	/* 获取要翻页要添加到的父元素 */
	var $ul = $("#selling>div");
	var pageIng = new Trunpage({
		currentPage: 1,
		allPage: allPageInt,
		warp: $ul,
		changePage: function (page) {
			var filterPage = arr.filter(function (e, i) {
				return i >= (page - 1) * pageSize && i < page * pageSize;
			})
			readDom(filterPage);
		}
	});
	// pageIng.initial();
	
	
	
	/* 调用函数，使用filter函数来过滤出要渲染的数据 */
	readDom(arr.filter(function (e, i) {
		return i < 5;
	}));
	
	
	/* 封装翻页数据 */
	function readDom(data) {
		$(".read").html("");
		$.each(data, function (i, e) {
			var div = $("<div>"+e.name+"</div>");
			$(".read").append(div);
		})
	}
	
	
	var $pageOut = $("#sellOut>div");
	var allPageOut = arr.length / pageSize;
	var pageOut = new Trunpage({
		currentPage: 1,
		allPage: allPageOut,
		warp: $pageOut,
		changePage: function (page) {
			console.log(page);
			// var filterPage = arr.filter(function (e, i) {
			// 	return i >= (page - 1) * pageSize && i < page * pageSize;
			// })
			// readDom(filterPage);
		}
	});
	
	
	$("li>span").css({
		background: "none",
	})
	
	
	
	
	